// 视觉参考 GitHub
// TODO 2.x 主题 codesandbox.io

@import "./fonts.sass"
@import "./variables.sass"
@import "./components.sass"
@import "./shortcuts.sass"

html
  font-size: 12px
html 
    font-family: sans-serif
    line-height: 1.15
    -webkit-text-size-adjust: 100%
    -webkit-tap-highlight-color: transparent

*, :after, :before
    box-sizing: border-box

.clearfix:after 
    display: block
    clear: both
    content: ""

img, svg
    vertical-align: middle

body
  font-size: 1rem
  line-height: 1.5
  font-family: $font-family
  -webkit-font-smoothing: antialiased
    margin: 0
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
  font-weight: 400
  line-height: 1.5
  color: #212529
  text-align: left
  background-color: #fff

html, body
  height: 100%

#root
  height: 100%
  > .Routes
    display: flex
    flex-direction: column
    min-height: 100%
    > .body
      flex-grow: 1
      display: flex
      flex-direction: column
      > .Spin
        align-items: center
        justify-content: center
      > * // 内容区域
        flex-grow: 1
        display: flex
        flex-direction: column
        > .body
          flex-grow: 1

button, input, optgroup, select, textarea
  font-size: 1rem
  font-family: $font-family
  -webkit-font-smoothing: antialiased

// *
//   transition: color .15s ease-out, background-color .15s ease-out, opacity .15s ease-out

a
  &, &:hover, &:focus, &:active, &:visited
    color: $brand
    outline: 0
    text-decoration: none
  &[disabled],
  &.disabled
    pointer-events: none
    cursor: not-allowed

a.text-decoration
  &:hover
    border-bottom: 1px solid $brand

pre
  margin: 0
  padding: 0.325rem 0.75rem
  border: 1px solid $border
  border-radius: 0.4rem
  background-color: $bg
  white-space: pre-wrap

.btn-top
  position: fixed
  right: 150px
  bottom: -1px
  width: 90px
  height: 50px
  text-align: center
  vertical-align: middle
  padding: 16px
  z-index: 1299
  background-color: #ffffff
  border: 1px solid #DDDDDD
  border-radius: 16px
  border-bottom-left-radius: 0
  border-bottom-right-radius: 0

.mr8
  margin-right: 8px

.row
  display: flex
  flex-wrap: wrap
  margin-right: -15px
  margin-left: -15px


.card
  position: relative
  display: flex
  flex-direction: column
  min-width: 0
  word-wrap: break-word
  background-color: #fff
  background-clip: border-box
  border: 1px solid rgba(0, 0, 0, 0.125)
  border-radius: .25rem

.card-header 
  font-size: 1.1rem
  padding: .75rem 1.25rem
  margin-bottom: 0
  background-color: rgba(0,0,0,.03)
  border-bottom: 1px solid rgba(0,0,0,.125)

.distribute-2-3
  flex-basis: 66.666666%
  max-width: 66.666666%


.distribute-1-3
  flex-basis: 33.333333%
  max-width: 33.333333%

.badge-secondary
  color: #fff
  background-color: #6c757d

.badge 
  display: inline-block
  padding: .25em .4em
  font-size: 75%
  font-weight: 700
  line-height: 1
  text-align: center
  white-space: nowrap
  vertical-align: baseline
  border-radius: .25rem
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out

code 
  font-size: 87.5% 
  color: #e83e8c 
  word-break: break-word 

.alert
  position: relative 
  padding: .75rem 1.25rem 
  margin-bottom: 0.65rem 
  border: 1px solid transparent 
  border-radius: .25rem 
  margin-bottom: 0
  .title
    margin-right: 0.65rem
    .icon
      font-size: 1rem
      margin-right: .5rem
    .msg
      font-weight: bold
      margin-right: 0.65rem
  a
    margin-right: 0.65rem
  &.alert-warning
    color: #856404 
    background-color: #fff3cd 
  &.alert-danger 
    color: #721c24
    background-color: #f8d7da
    border-color: #f5c6cb
  &.alert-info 
    color: #0c5460
    background-color: #d1ecf1
    border-color: #bee5eb

.mt10
  margin-top: 10px

.mt20
  margin-top: 20px
